<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>主页商城</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/message2.css">

    <style>
        /* div[class*='col'] {
             border: 1px solid red;
         }
 */
        img[class*=d-block] {
            /*width: 200px;*/
            height: 250px;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
    <!-- 引入组件库 -->
</head>
<body>
<input type="hidden" value="${flag}" id="flag">
<!--容器-->
<div class="container">
    <!--行-->
    <div class="row">
        <c:if test="${flag2==null}">
            <div class="col-lg-12">
                <b>健康商城</b>
                <a href="${pageContext.request.contextPath}/login.jsp" style="position: relative;left: 740px;"><b>你还没登录,是否需要登录?</b></a>
                <a href="${pageContext.request.contextPath}/register.jsp" style="position: relative;left: 760px;"><b>点击注册账号</b></a>
            </div>
        </c:if>
        <c:if test="${flag2=='login'}">
        <div class="col-lg-12">
            <b>健康商城</b>
            <b style="position: relative;left: 740px;">你好，${username}</b>
            <a href="${pageContext.request.contextPath}/user/homepage"
               style="position: relative;left: 760px;"><b>个人主页</b></a>
        </div>
            </c:if>
        </div>
        <!--行-->
        <div class="row">
            <!--列-->
            <div class="col-lg-12">
                <!--轮播-->
                <div id="img">
                    <template>
                        <el-carousel :interval="4000" type="card" height="200px">
                            <el-carousel-item v-for="item in items" :key="item">
                                <h3 class="medium">
                                    <img v-bind:src="item" style="height: 200px;width: 554px;"/>
                                </h3>
                            </el-carousel-item>
                        </el-carousel>
                    </template>
                </div>
            </div>
        </div>

        <!--行-->
        <div class="row">
            <div class="col-lg-12">
                <h2>预约服务:</h2>
            </div>
        </div>


        <!--行-->
        <!--显示检查组-->
        <div class="row">

            <div class="col-lg-12">
                <div id="app">
                    <el-dropdown trigger="click" v-for="item in list">

  <span class="el-dropdown-link" @click="getCheckGroupItemAllList(item.id)">
   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    {{item.name}}<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="item2 in list2"><a class="a"
                                                                        @click="modalBox(item2.name,item2.id)">{{item2.name}}</a>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel2">预约服务</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <span id="span"></span>
                                    <span id="hidden" style="display: none"></span>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                    <a id="jump">
                                        <button type="button" class="btn btn-primary" id="btn2" @click="guanbi()">确定
                                        </button>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <br>
        <%--行,显示套餐--%>
        <div class="row">


            <div class="col-lg-12">
                <h2>超值套餐:</h2>
            </div>
        </div>
        <div class="row">
            <div id="app2">
                <el-row>
                    <el-button v-for="item in packageList" @click="modalBox2(item.name,item.id)">{{item.name}}
                    </el-button>
                </el-row>

                <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">预约服务</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <span id="span2"></span>
                                <span id="hidden2" style="display: none"></span>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <a id="jump2">
                                    <button type="button" class="btn btn-primary" id="btn3" @click="guanbi()">确定
                                    </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!--行-->
        <div class="row">
            <div class="col-lg-12">
                <div class="jumbotron jumbotron-fluid">
                    <div class="container">
                        <h1 class="display-4">蒋峰健康商城</h1>
                        <p class="lead">蒋峰健康商城是一个非常好的健康商城,包含了预约服务</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/message.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/static/js/axios-0.18.0.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    $(function () {
        var flag = $("#flag").val();
        if (flag == "succeed") {
            $.message({
                message: "登录成功",
                type: "success",
                time: '4000',
                showClose: true
            });
        }
    });

    /**
     * 显示检查组和检查项
     */
    var vue = new Vue({
        el: "#app",
        data: {
            message: "",
            list: [],
            list2: [],
            message2: "",
            activeName: "",
        },
        methods: {
            /**
             * 获取检查组
             */
            getCheckGroupAllList() {
                axios.get("/queryAll").then(data => {
                    console.log("this:" + this);
                    console.log("data.list:" + data.data)
                    this.list = data.data
                    this.message = "成功";
                }).catch(e => {
                    alert("错误信息为:" + e);
                    this.message = "失败";
                })
            },
            /**
             * 获取检查项
             * @param id
             */
            getCheckGroupItemAllList(id) {
                axios.get("/queryCheckItemID", {
                    params: {
                        id: id
                    }
                }).then(data => {
                    console.log("this:" + this);
                    console.log("data.list:" + data.data)
                    this.list2 = data.data
                    this.message2 = "成功";

                }).catch(e => {
                    alert("错误信息为:" + e);
                    this.message2 = "失败";
                })
            }, modalBox(name, id) {
                $("#exampleModal").modal('show');
                $("#span").html("确定预约:<b>" + name + "</b>体检吗?");
                $("#hidden").html(id)
            }, guanbi() {
                $("#exampleModal").modal('hide');
                $("#jump").attr("href", "${pageContext.request.contextPath}/user/goAddMember?id=" + $("#hidden").text());
            }
        },
        created() {
            this.getCheckGroupAllList();
        }
    });

    var vue2 = new Vue({
        el: "#app2",
        data: {
            packageList: []
        },
        methods: {
            /**
             * 获取套餐
             */
            getPackage() {
                axios.get("/showPackages").then(data => {
                    this.packageList = data.data;
                }).catch(e => {
                    alert("错误信息为:" + e);
                });
            }, modalBox2(name, id) {
                $("#exampleModal2").modal('show');
                $("#span2").html("确定预约:<b>" + name + "</b>超值套餐吗?");
                $("#hidden2").html(id)
            }, guanbi() {
                $("#exampleModal2").modal('hide');
                $("#jump2").attr("href", "${pageContext.request.contextPath}/user/goAddMember2?id=" + $("#hidden2").text());
            }
        },

        created() {
            this.getPackage();
        }
    });
    /**
     * 图片轮播操作
     */
    var image = new Vue({
        el: "#img",
        data: {
            items: ["${pageContext.request.contextPath}/static/img/img.png", "${pageContext.request.contextPath}/static/img/img_1.png", "${pageContext.request.contextPath}/static/img/img_2.png", "${pageContext.request.contextPath}/static/img/webp.webp", "${pageContext.request.contextPath}/static/img/webp (1).webp"]
        }
    });
</script>

</html>